<template>
  <el-table border :data="list" size="mini" :lazy="true">
    <el-table-column label="资源名" align="center">
      <template slot-scope="{row}">
        <div v-if="row.edit" style="display:flex">
          <el-input v-model="row.name" size="mini" />
          <el-button size="mini" style="margin-left:10px" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">取消</el-button>
        </div>
        <span v-else>{{ row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="大小" prop="size" />
    <el-table-column label="类型" prop="mime" />
    <el-table-column label="后缀" prop="suffix" />
    <el-table-column label="sha256" align="center">
      <template slot-scope="{row}">
        <div :title="row.sha256" style="width:100; overfolw: hidden; white-space: nowrap"> {{ row.sha256 }}</div>
      </template>
    </el-table-column>
    <el-table-column label="上传时间" width="150" align="center">
      <template slot-scope="props">
        <span class="el-icon-date"> {{ new Date(props.row.created_at) | parseTime('{y}-{m}-{d}') }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="{row}">
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteResource(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// api
import { deleteResource } from '@/api/mivawork/resource.js';

export default {
  props: {
    list: {
      type: Array,
      default() {
        const arr = [];
        return arr;
      }
    }
  },
  methods: {
    async deleteResource(row) {
      const res = await deleteResource({ id: row.id });
      this.$message({
        type: res.code === 200 ? 'success' : 'error',
        message: res.message
      });
      this.$emit('delete');
    }
  }
};
</script>
